<div id="date-popup" class="hidden">
    <div id="date-popup-inner">
        <div id="date-popup-inner-header">
            <img id="close-popup" src="/clientarea/img/icon.png">
        </div>
        <div id="date-popup-content">
            <p>Укажите период</p>
            <ul id="popup-tabs-head">
                <li>
                    <span id="tab-range-week">Неделя</span>
                </li>
                <li class="active-tab-item">
                    <span id="tab-range-month">Месяц</span>
                </li>
                <li>
                    <span id="tab-range-quartal">Квартал</span>
                </li>
                <li>
                    <span id="tab-range-year">Год</span>
                </li>	
            </ul>
            <ul id="popup-tabs-contents">
                <li>
                    <div class="hidden tab-range-week">
                        <input type="text" class="text-field" name="start-range" value="17.03.2014"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
                    </div>
                </li>
                <li>
                    <div class="active-tab-item tab-range-month">
                        <input type="text" class="text-field" name="start-range" value="24.02.2014"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
                    </div>
                </li>
                <li>
                    <div class="hidden tab-range-quartal">
                        <input type="text" class="text-field" name="start-range" value="24.12.2013"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
                    </div>
                </li>
                <li>
                    <div class="hidden tab-range-year">
                        <input type="text" class="text-field" name="start-range" value="24.03.2013"><span>&mdash;</span><input type="text" class="text-field" name="finish-range" value="24.03.2014">
                    </div>
                </li>
            </ul>
            <div class="clear"></div>
        </div>
        <div id="date-popup-inner-footer">
            <button id="date-range-selector" class="single-button">Выбрать</button>
        </div>
    </div>
</div>
<h1>Водителям</h1>
<p>На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее. На этой странице вы можете просмотривать все добавленные вами эвакуаторы, у каждого есть свой статус и так далее.</p>
<div id="content-inner">
    <form enctype="multipart/form-data" action="" method="get" name="client-area-drivers-form">
        <div id="content-inner-top">
            <span class="in-row">Показать</span>
            <div class="select-style w126px to-left">
                <?php
                $sel = isset($_GET['evakID']) ? $_GET['evakID'] : $evakID;
                echo CHtml::dropDownList('evakID', $sel, CHtml::listData(Evaks::model()->findAll('evak_user = \'' . Yii::app()->user->id . '\''), 'evak_id', 'evak_id'), array('class' => 'select-styled w146px', 'empty' => 'ID эвакуатора'))
                ?>														
            </div>						
            <span class="in-row">за период</span>
            <div class="field-outer">
                <img src="/clientarea/img/icon.png" />
                <input type="button" class="single-button calendar-button" value="24.02.2013 — 24.03.2014" />
                <input id="range-text" type="text" name="range" value="24.02.2013 — 24.03.2014" class="hidden" />
            </div>
            <span class="in-row">и сгруппировать по</span>
            <div class="select-style w106px to-left">
                <select name="group-by" class="select-styled w126px">
                    <option value="days">Дням</option>
                    <option value="weeks">Неделям</option>
                    <option value="months" selected>Месяцам</option>
                </select>														
            </div>
        </div>
        <div class="clear"></div>
        <div id="chartdiv"></div>
        <table class="client-area-table">
            <thead>
                <tr>
                    <th><div class="title mid-cell"><p>Дата</p></div></th>
            <?php
            $graph = '';
            foreach ($models as $model):
                ?>
                <th><div class="title mid-cell"><p><?php
                        $staus[$model['evstat_id']] = $model['evstat_title'];
                        echo $model['evstat_title'];

                        $graph .= 'var graph' . $model['evstat_id'] . ' = new AmCharts.AmGraph();
                                    graph' . $model['evstat_id'] . '.valueAxis = valueAxis1; // we have to indicate which value axis should be used
                                    graph' . $model['evstat_id'] . '.title = "#' . $model['evstat_title'] . '";
                                    graph' . $model['evstat_id'] . '.valueField = "status_' . $model['evstat_id'] . '";
                                    graph' . $model['evstat_id'] . '.bullet = "round";
                                    graph' . $model['evstat_id'] . '.hideBulletsCount = 10;
                                    graph' . $model['evstat_id'] . '.bulletBorderAlpha = 1;
                                    graph' . $model['evstat_id'] . '.bulletSize = 6;
                                    graph' . $model['evstat_id'] . '.lineThickness = 2;
                                    graph' . $model['evstat_id'] . '.bulletColor = "#FFF";
                                    graph' . $model['evstat_id'] . '.bulletBorderColor = "#BBE807";
                                    graph' . $model['evstat_id'] . '.lineColor = "' . '#' . str_pad(dechex(mt_rand(0, 0xFFFFFF)), 6, '0', STR_PAD_LEFT) . '";
                                    chart.addGraph(graph' . $model['evstat_id'] . '); '
                                . ' ';
                        ?>

                    </p></div></th>

                <?php //echo '<pre>'; print_r($model->logs) ?>
            <?php endforeach; ?>
            </tr>					
            </thead>
            <tbody>
                <?php foreach ($logs as $log): ?>
                    <tr>						
                        <td><div class="cell mid-cell"><p><?php echo date('d.m.Y', $log['status_log_begin']); ?> — <?php echo date('d.m.Y', (empty($log['status_log_end']) ? time() : $log['status_log_end'])); ?></p></div></td>
                        <?php foreach ($staus as $statusID => $statusTitle): ?>
                            <td>
                                <div class="cell mid-cell">
                                    <p>
                                        <?php
                                        if ($log['evak_status_id'] == $statusID) {
                                            $time = (empty($log['status_log_end']) ? time() : $log['status_log_end']) - $log['status_log_begin'];
                                            $times_values = array(
                                                'сек.',
                                                'мин.', 'час.', 'д.', 'лет');
                                            $times = $this->seconds2times($time);
                                            $date = '';
                                            for ($i = count($times) - 1; $i >= 0; $i--) {
                                                $date .= $times[$i] . ' ' . $times_values[$i] . ' ';
                                            }
                                            echo $date;
                                        } else {
                                            echo '--';
                                        }
                                        ?>
                                    </p>
                                </div>
                            </td>
                        <?php endforeach; ?>
                    </tr>
                <?php endforeach; ?>
                <tr class="total-row">
                    <td><div class="cell mid-cell"><p>Итого:</p></div></td>
                    <td><div class="cell mid-cell"><p>190 часов 45 минут</p></div></td>
                    <td><div class="cell mid-cell"><p>190 часов 45 минут</p></div></td>
                    <td><div class="cell mid-cell"><p>190 часов 45 минут</p></div></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>	
<?php
//echo '<pre>';
//print_r($data);
$chartData = array();
foreach ($data as $date => $d) {
    $summ = 0;
    $st = array();
    foreach ($d as $l) {
        $summ += ((empty($l['status_log_end']) ? time() : $l['status_log_end']) - $l['status_log_begin']) / 3600;
        $st['status_' . $l['evak_status_id']] = $summ;
    }
    $chartData[] = array('date' => $date) + $st;
}
?>
<?php $chartData = array_reverse($chartData); ?>
<?php // echo '<pre>';
//print_r($chartData); ?>
<script type="text/javascript">
    function handleHeight() {
        var h = $(document).height();
        var h1 = $("#left-sidebar").height();
        h = h - 40;
        h1 = h1 - 40;
        if (h <= h1) {
            $("#main-content").css("height", h1);
        } else
        {
            $("#main-content").css("height", "100%");
        }
    }
</script>	
<script type="text/javascript">
    $(function() {
        $("#no-js-warning").addClass("hidden");
        handleHeight();
        var n = navigator.appVersion;
        var p = n.indexOf("WebKit");
        if (p >= 0) {
            $("div.select-style").addClass("webkiteng");
        }
    });
</script>
<script type="text/javascript">
    $(function() {
        $(window).resize(function() {
            handleHeight();
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $(window).keydown(function() {
            handleHeight();
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $(window).click(function() {
            handleHeight();
        });
    });
</script>
<script>
    $(function() {
        var a = $("span.unread-items-count-text");
        var b = a.parent();
        var c = a.text();
        if ($.trim(c) == "0") {
            b.addClass("hidden");
        } else {
            if ($.trim(c) == "") {
                b.addClass("hidden");
            }
        }
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#client-area-sidebar-nav li a").hover(function() {
            var a = $(this).find("img");
            var b = a.attr("class");
            var c = b + "-hovered";
            a.removeClass(b);
            a.addClass(c);
        }, function() {
            var a = $(this).find("img");
            var b = a.attr("class");
            var c = b.replace("-hovered", "");
            a.removeClass(b);
            a.addClass(c);
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("select").focus(function() {
            var a = $(this).parent();
            a.addClass("select-focused");
        });
        $("select").focusout(function() {
            var a = $(this).parent();
            a.removeClass("select-focused");
        });
    });
</script>
<script type="text/javascript">
    AmCharts.monthNames = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
    AmCharts.shortMonthNames = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'];
    AmCharts.dayNames = ['Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота', 'Воскресенье'];
    AmCharts.shortDayNames = ['Пон', 'Вт', 'Ср', 'Чет', 'Пят', 'Суб', 'Вос'];
    var chart;
    var chartData = <?php echo json_encode($chartData); ?>;

// this method is called when chart is first inited as we listen for "dataUpdated" event
    function zoomChart() {
        // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
        //chart.zoomToIndexes(0, chart.dataProvider.length);
    }

// create chart
    AmCharts.ready(function() {

        // SERIAL CHART    
        chart = new AmCharts.AmSerialChart();

        chart.marginTop = 0;
        chart.marginLeft = 0;
        chart.autoMarginOffset = 0;
        chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
        chart.zoomOutButton = {
            backgroundColor: '#000000',
            backgroundAlpha: 0.15
        };
        chart.dataDateFormat = "DD.MM.YYYY";
        chart.dataProvider = chartData;
        chart.categoryField = "date";

        // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
        chart.addListener("dataUpdated", zoomChart);

        // AXES
        // category                
        var categoryAxis = chart.categoryAxis;
        categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
        categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
        categoryAxis.dashLength = 1;
        categoryAxis.gridAlpha = 0.15;
        //categoryAxis.axisColor = "#DADADA";
        categoryAxis.position = "top";
        categoryAxis.minorGridEnabled = true;


        // first value axis (on the left)
        var valueAxis1 = new AmCharts.ValueAxis();
        //valueAxis1.axisColor = "#FF6600";
        //valueAxis1.axisThickness = 0;
        //valueAxis1.gridAlpha = 0.15;	
        chart.addValueAxis(valueAxis1);

        // GRAPHS
        // first graph
<?php echo $graph; ?>

        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorPosition = "mouse";
        chart.addChartCursor(chartCursor);

        // SCROLLBAR
        //var chartScrollbar = new AmCharts.ChartScrollbar();
        //chartScrollbar.scrollbarHeight = 25;
        //chart.addChartScrollbar(chartScrollbar);

        // LEGEND
        var legend = new AmCharts.AmLegend();
        legend.marginLeft = 0;
        legend.position = "bottom";
        legend.align = "center";
        legend.valueAlign = "left";
        chart.addLegend(legend);

        // WRITE
        chart.write("chartdiv");
    });
</script>
<script type="text/javascript">
    $(function() {
        $("input[type=button].calendar-button").click(function() {
            $("#date-popup").removeClass("hidden");
            var h = $(window).height();
            var w = $("#main-content").width();
            var h1 = $("#date-popup").height();
            var w1 = $("#date-popup").width();
            var a = $(window).width();
            if (a >= 980) {
                var w2 = $("#left-sidebar").width();
                w += 40;
                w2 += 40; //40-padding 20px
                $("#date-popup").css("top", h / 2 - h1 / 2);
                $("#date-popup").css("left", (w / 2 - w1 / 2) + w2);
            } else {
                $("#date-popup").css("top", h / 2 - h1 / 2);
                $("#date-popup").css("left", w / 2 - w1 / 2);
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("select[name=evakID]").change(function() {
            var a = $("#range-text").val();
            if ($.trim(a) != "") {
                $("form[name=client-area-drivers-form]").submit();
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#date-range-selector").click(function() {
            var a = $("#popup-tabs-contents li div.active-tab-item input[name=start-range]");
            var b = $("#popup-tabs-contents li div.active-tab-item input[name=finish-range]");
            $("input.calendar-button").val(a.val() + " — " + b.val());
            $("#range-text").val(a.val() + " — " + b.val());
            $("#date-popup").addClass("hidden");
            var c = $("select[name=tow-id]").find("option:selected").val();
            var d = $("select[name=tow-id] option:first-child").val();
            if (c != d) {
                $("form[name=client-area-drivers-form]").submit();
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("select[name=group-by]").change(function() {
            var a = $("#range-text").val();
            if ($.trim(a) != "") {
                var b = $("select[name=tow-id]").find("option:selected").val();
                var c = $("select[name=tow-id] option:first-child").val();
                if (b != c) {
                    $("form[name=client-area-drivers-form]").submit();
                }
            }
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#close-popup").click(function() {
            $("#date-popup").addClass("hidden");
        });
    });
</script>
<script type="text/javascript">
    $(document).keydown(function(e) {
        if (e.keyCode == 27) {
            var a = $("#date-popup").hasClass("hidden");
            if (a == false) {
                $("#date-popup").addClass("hidden");
            }
        }
    });
</script>
<script type="text/javascript">
    $(function() {
        $("#popup-tabs-head li").click(function() {
            $("#popup-tabs-head li").removeClass("active-tab-item");
            $(this).addClass("active-tab-item");
            $("#popup-tabs-contents li div").removeClass("hidden");
            $("#popup-tabs-contents li div").addClass("hidden");
            var a = $(this).find("span");
            var b = a.attr("id");
            var c = $("#popup-tabs-contents li div." + b);
            c.removeClass("hidden");
            $("#popup-tabs-contents li div").removeClass("active-tab-item");
            c.addClass("active-tab-item");
        });
    });
</script>
<script type="text/javascript">
    $(function() {
        $("input[name=start-range]").keypress(function(e) {
            var ca = new Array(46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57);
            var c = !e.charCode ? e.which : e.charCode;
            if ($.inArray(c, ca) !== -1) {
            } else {
                e.preventDefault();
            }
        });
        $("input[name=finish-range]").keypress(function(e) {
            var ca = new Array(46, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57);
            var c = !e.charCode ? e.which : e.charCode;
            if ($.inArray(c, ca) !== -1) {
            } else {
                e.preventDefault();
            }
        });
    });
</script>